<template>
  <div class="xiangqing_page">
    <div class="bg">
        <div class="top">
           <van-icon name="arrow-left" @click="back"/>
           <div>客户详情</div>
           <van-icon name="wap-home-o" />
        </div>
        <div class="touxiang">
            <div class="img">
                <img :src="require('../../assets/images/kehu/touxiang.png')" alt="">
            </div>
            <p>{{datas.custName}}</p>

            <div class="xiugai" @click="toxiugai">编辑信息</div>
        </div>

        <div class="jiben">
           <div class="icon">
               <img :src="require('../../assets/images/kehu/jibenxinxi.png')" alt="">
           </div>
           <p>基本信息</p>
        </div>
    </div>

   <ul>
       <li>
           <div class="l">客户名称</div>
           <div class="r">{{datas.custName}}</div>
       </li>
          <li>
           <div class="l">联系电话</div>
           <div class="r">{{datas.telephone}}</div>
       </li>

        <li>
           <div class="l">学历</div>
           <div class="r" v-show="datas.education!=null">{{datas.education}}</div>
             <div class="r" v-show="datas.education==null">无</div>
       </li>

         <li>
           <div class="l">性别</div>
           <div class="r">{{datas.sex}}</div>
       </li>

         <li>
           <div class="l">年龄</div>
           <div class="r">{{datas.age}}岁</div>
       </li>

         <li>
           <div class="l">所属城市</div>
           <div class="r">{{datas.cityName}}市</div>
       </li>

         <li>
           <div class="l">公司名称</div>
           <div class="r">{{datas.company}}</div>
       </li>

         <li>
           <div class="l">职位</div>
           <div class="r" v-show="datas.position!=null">{{datas.position}}</div>
            <div class="r" v-show="datas.position==null">无</div>
       </li>

         <li>
           <div class="l">录入时间</div>
           <div class="r">{{datas.createTime}}</div>
       </li>  
   </ul>
  </div>
</template>

<script>
import {KehuDetail} from '../../request/api'
export default {
  data() {
    return {
        datas:{}
    };
  },
  created(){
    
      KehuDetail(this.$route.params.id).then(res=>{
          console.log(res);
          this.datas = res.data;
      })
  },
  methods: {
    back(){
        this.$router.back()
    },
    toxiugai(){
        this.$router.push('/xiugai')
    }

  },
};
</script>

<style lang="less" scoped>
.bg {
  width: 100%;
  height: 182px;
  background-color: #039;
  .top{
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 20px;
      color: #fff;
      padding: 0 12px;
      box-sizing: border-box;
      .van-icon{
          font-size: 24px;
      }

  }

  .touxiang{
      width: 100%;
      height: 62px;
    //   border: 1px solid #000;
      display: flex;
      align-items: center;
      padding-left: 28px;
      box-sizing: border-box;
      .img{
          width: 62px;
          height: 62px;
        //   border: 1px solid #000;
          border-radius: 50%;
          margin-right: 22px;
          img{
              width: 100%;
          }
      }
      p{
          color: #fff;
      }

      .xiugai{
          width: 99px;
          height: 31px;
          background-color: #335cad;
          color: #fff;
          line-height: 31px;
          text-align: center;
          border-radius: 15px 0 0 15px;
          margin-left: 115px;
      }
  }

  .jiben{
      width: 350px;
      height: 47px;
      background-color: #fff;
      border-radius: 10px 10px 0 0;
      margin-left: 12px;
      margin-top: 23px;
      display: flex;
      align-items: center;
      .icon{
          width: 20px;
          height: 20px;
        //   border: 1px solid #000;
          margin-right: 12px;
          margin-left: 18px;
          img{
              width: 100%;
              display: block;
          }
      }
      p{
          font-weight: 600;
      }
  }
}

ul{
    padding: 0 26px;
    li{
        height: 32px;
        display: flex;
        align-items: center;
        div{
            &:nth-of-type(1){
                margin-right: 10px;
                width: 20%;
                text-align: right;
                font-size: 16px;
                color: #999;
            }
        }

    }
}

</style>